<template>
  <div class="video-detail">
    <video
        class="video"
        controls=""
        ref="video"
        id="video"
        v-on:error.prevent="error($event)"
    >
    </video>
  </div>
</template>

<script>
import {onMounted} from "vue";
import myAxios from "../request/myAxios";
import {useRoute} from "vue-router";

export default{
  name:"VideoDetail",
  data() {
    return {
      // videoUrls: ''
      show: true,
      isError: false, // 是否不能播放视频
      errMsg: "",
      route:useRoute()
    };
  },
  computed: {},
  components: {},
  async created () {
    const res = await myAxios.get('/video/getVideoById/'+this.route.query.id)
    if (res?.data.code === 0){
      this.$refs.video.src = res.data.data.url
    }
    let video = document.getElementById("video");
    // 如果是手机端，在挂载时播放
    if(this.isMobile){
      video.play()
    }
  },
  methods: {
    close() {
      this.show = false;
      this.$emit("close");
    },
    error(e) {
      console.log(e);
      if(this.videoUrl == ''){
        this.isError = true
        this.errMsg = "该文章暂无视频！"
      }else{
        this.isError = true
        this.errMsg = "视频链接失效！无法播放！"
      }
    },
  },
}
</script>

<style>
.PlayVideo {
  width: 45.3125vw;
  height: 50.1vh;
  position: relative;
}
.close {
  position: absolute;
  top: -32px;
  right: -32px;
  z-index: 9999;
}
.video {
  width: 45.3125vw;
  height: 50.1vh;
  background: #000;
}
.msg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
</style>
